<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>querySelectorAll</title>
  </head>
  <body></body>
  <script>
    /* 
     1. querySelectorAll()方法跟 querySelector()一样，也接收一个用于查询的参数，但它会返回所有匹配的节点，而不
        止一个。这个方法返回的是一个 NodeList 的静态实例。
     2. querySelectorAll()返回的 NodeList 实例一个属性和方法都不缺，但它是一个静态的“快照”，而非“实时”的查询。
        这样的底层实现避免了使用 NodeList 对象可能造成的性能问题。
     3. 以有效 CSS 选择符调用 querySelectorAll()都会返回 NodeList，无论匹配多少个元素都可以。如果没有匹配项，则
        返回空的 NodeList 实例。
     4. 与 querySelector()一样，querySelectorAll()也可以在 Document、DocumentFragment 和 Element 类型
        上使用。
     5. 返回的 NodeList 对象可以通过 for-of 循环、item()方法或中括号语法取得个别元素。
     6. 与 querySelector()方法一样，如果选择符有语法错误或碰到不支持的选择符，则 querySelectorAll()方法会抛
        出错误。
   */

    // 取得 ID 为"myDiv"的<div>元素中的所有<em>元素
    let ems = document.getElementById("myDiv").querySelectorAll("em");
    // 取得所有是<p>元素子元素的<strong>元素
    let strongs = document.querySelectorAll("p strong");
    // 以下 3 个循环的效果一样
    for (let strong of strongElements) {
      strong.className = "important";
    }
    for (let i = 0; i < strongElements.length; ++i) {
      strongElements.item(i).className = "important";
    }
    for (let i = 0; i < strongElements.length; ++i) {
      strongElements[i].className = "important";
    }
  </script>
</html>
